<template>
  <div>
    <h1 style="text-align: center;">新建井</h1>
    <div>
      <el-input v-model="keyword" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="getWellInfoList()">搜索</el-button>
      <el-button type="primary" @click="dialogVisible=true">新建井</el-button>
    </div>
    <div class="wrapper">
      <el-table :data="tableData" style="width: 100%; overflow: auto; ">
        <!-- <el-table-column type="selection" width="55">
        </el-table-column> -->
        <el-table-column label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="well_name" label="井名">
        </el-table-column>
        <el-table-column prop="locx" label="井口坐标X">
        </el-table-column>
        <el-table-column prop="locy" label="井口坐标Y">
        </el-table-column>
        <el-table-column prop="kb" label="kb(补心海拔)">
        </el-table-column>
        <el-table-column prop="wd" label="wd(水深)">
        </el-table-column>
        <el-table-column prop="workunit" label="作业单位">
        </el-table-column>
        <el-table-column prop="operator" label="操作者">
        </el-table-column>
        <el-table-column prop="create_date" label="创建时间">
        </el-table-column>
        <el-table-column prop="update_date" label="更新时间">
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="info" icon="el-icon-edit" size="small" @click="editWellInfo(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteWellInfo(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <MyPagination :currentPage="currentPage" :pageSize="pageSize" :total="total" @newValue="handleSizeChange"
                    @newCurrentPage="handleCurrentChange" />
    </div>
    <el-dialog
        title="新建井"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="demo-ruleForm">
        <el-form-item label="井名" prop="wellName">
          <el-input v-model="form.wellName" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="关联项目" prop="projectName">
          <el-select v-model="form.project_id" placeholder="请选择项目名称">
            <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="item.project_name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="井口坐标X" prop="locx">
          <el-input v-model="form.locx" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="井口坐标Y" prop="locy">
          <el-input v-model="form.locy" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="补心海拔" prop="kb">
          <el-input v-model="form.kb" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="水深" prop="wd">
          <el-input v-model="form.wd" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="作业单位" prop="workUnit">
          <el-input v-model="form.workUnit" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="操作者" prop="operator">
          <el-input v-model="form.operator" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addWellInfo()">确 定</el-button>
  </span>
    </el-dialog>
    <UpdateInfo ref="updateInfo"></UpdateInfo>
  </div>
</template>
<script>

import MyPagination from "@/components/MyPagination.vue";
import UpdateInfo from "@/components/wellinfo/UpdateInfo.vue";
import api from "@/api/api.js";

export default {
  components: {MyPagination,UpdateInfo},
  data() {
    return {
      dialogVisible: false,
      projectList:[],//所有的项目数据
      form: {
        project_id: '',
        wellName: '',
        locx: '',
        locy: '',
        kb: '',
        wd: '',
        workUnit: '',
        operator: '',
      },
      keyword: '',
      tableData: [],
      //分页查询参数
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      total: 0, // 数据总条数
      rules: {
        wellName: [
          {required: true, message: '请输入井名称', trigger: 'blur'}
        ],
        projectName: [
          {required: true, message: '请选择关联项目', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {
          });
    },
    handleSizeChange(a, b) {
      // this.pageSize = val; // 改变每页显示的条数
      // this.currentPage = 1; // 重置当前页为第一页
      this.currentPage = b, // 当前页码
          this.pageSize = a // 每页显示条数

    },
    handleCurrentChange(c) {
      // this.currentPage = val; // 改变当前页码
      console.log('当前页码:', c);
      this.currentPage = c // 当前页码
      // getZndbList(this.currentPage)
    },
  //   获取井全部的数据
    getWellInfoList(){
      const map = {
        currentPage: this.currentPage,
        keyword: this.keyword,
      }
      api.post("/wellInfo/getWellInfoList",map).then(res => {
        this.tableData = res.data.wellInfoList;
        console.log("获取井全部的数据",res);
      })
    },
  // 添加井的信息
    addWellInfo(){
      const map = {
        project_id: this.form.project_id,
        well_name: this.form.wellName,
        locx: this.form.locx,
        locy: this.form.locy,
        kb: this.form.kb,
        wd: this.form.wd,
        workUnit: this.form.workUnit,
        operator: this.form.operator,
      }
      api.post("/wellInfo/addWellInfo",map).then(res => {
        this.getWellInfoList();
        this.dialogVisible = false;
        this.form.wellName = '';
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        //清空数据
        this.form.project_id = '';
        this.form.wellName = '';
        this.form.locx = '';
        this.form.locy = '';
        this.form.kb = '';
        this.form.wd = '';
        this.form.workUnit = '';
        this.form.operator = '';
      }).catch(err => {
        this.$message({
          message: err.message,
          type: 'error'
        })
      })
    },
    // 编辑井的信息
    editWellInfo(row){
      this.$refs.updateInfo.dialogFormVisible=true;
      this.$refs.updateInfo.form = row;
      this.$refs.updateInfo.projectList = this.projectList;
    },
    // 删除井的信息
    deleteWellInfo(id){
      const map = {
        well_id: id,
      }
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.post("/wellInfo/deleteWellInfo",map).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getWellInfoList();
        }).catch(err => {
          this.$message({
            message: err.message,
            type: 'error'
          })
        })
      })
    },
    //   获取所有的项目数据
    getProjectInfoList() {
      const map = {
        currentPage: this.currentPage,
        keyword: this.keyword,
      }
      api.post("/project/getProjectList", map).then(res => {
        this.projectList = res.data.projectList;
      })
    },
  },
  created() {
    this.getWellInfoList();
    this.getProjectInfoList();
  }
}
</script>

<style scoped lang="less">

</style>